<template>
  <div class="example-menu">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>
    <data-v-panel>
      <template #title
        >菜单组件
        <a href="JavaScript:;" class="look-code" @click="lookCode('menu')"
          >代码</a
        >
      </template>
      <template #body>
        <data-v-menu
          :menuList="menuList"
          color="#0067b4"
          activeColor="#ff8a00"
        ></data-v-menu>
        <data-v-menu
          :menuList="menuList"
          color="#8957A1"
          activeColor="#DD5347"
        ></data-v-menu>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template #title>菜单组件2</template>
      <template #body>
        <data-v-menu
          :menuList="menuList2"
          color="#8957A1"
          activeColor="#DD5347"
          type="2"
        ></data-v-menu>
      </template>
    </data-v-panel>
    <data-v-panel>
      <template #title>菜单组件3</template>
      <template #body>
        <data-v-menu
          :menuList="menuList3"
          color="#8957A1"
          activeColor="#DD5347"
          type="3"
        ></data-v-menu>
      </template>
    </data-v-panel>
    <go-home></go-home>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";
export default {
  name: "example-menu",
  data() {
    return {
      thisCode: "",
      isShowCode: false,
      menuList: this.createMenuList(5),
      menuList2: this.createMenuList(9),
      menuList3: this.createMenuList(6)
    };
  },
  components: {
    CodeContainer
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then(res => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    },

    createMenuList(length) {
      return Array.from({ length }, (_, i) => {
        return {
          to: "/menu" + i,
          name: "菜单" + i,
          desc: "菜单" + i + "描述..."
        };
      });
    }
  }
};
</script>


<style lang="less">
.example-menu {
  min-height: 100vh;
  padding: 10px;
  background: #000 url(./example1-img/gridBg.png);
  color: #fff;
}
</style>
